component.messages

messages

1490 messages
  • Image
    adrian Latest comment line...
    17 days ago
  • Image
    bogdan Latest comment line...
    17 days ago
  • Image
    susanne Latest comment line...
    17 days ago
Load earlier messages
Image
July 8, 2013 12:38 pm adrian
Hello bogdan. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, reiciendis soluta libero eligendi fuga quam nam tempora illum iste atque hic eveniet vel accusantium ad quisquam a sequi impedit cumque! Autem, ipsam esse officia amet.
Image
July 8, 2013 12:38 pm bogdan
Hello adrian. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, reiciendis soluta libero eligendi fuga quam nam tempora illum iste atque hic eveniet vel accusantium ad quisquam a sequi impedit cumque! Autem, ipsam esse officia amet.
Today
Image
12:38 pm adrian
Hello bogdan. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, quos soluta cupiditate dolor nobis id!
Image
12:38 pm bogdan
Hello adrian. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, quas alias voluptatum odit nemo consequuntur blanditiis praesentium pariatur vitae dolore earum saepe dolorum maiores vero fuga sequi quibusdam labore optio doloribus consectetur laudantium in id quae nostrum dignissimos quidem voluptatibus!
<!-- Widget -->
<div class="widget widget-messages widget-heading-simple widget-body-white">
	<div class="widget-body padding-none">
		
		<div class="row row-merge borders">
			<div class="col-md-3 listWrapper">
				<div class="innerAll">
					<form autocomplete="off" class="form-inline margin-none">
						<div class="input-group input-group-sm">
							<input type="text" class="form-control" placeholder="Find someone .." />
							<span class="input-group-btn">
								<button type="button" class="btn btn-primary btn-xs pull-right"><i class="fa fa-search"></i></button>
							</span>
						</div>
					</form>
				</div>
				<span class="results">1490 messages <i class="fa fa-circle-arrow-down"></i></span>
				<ul class="list unstyled">
															<li class="active">
						<div class="media innerAll">
							<div class="media-object pull-left thumb hidden-phone"><img data-src="holder.js/50x50/dark" alt="Image" /></div>
							<div class="media-body">
								<span class="strong">adrian</span>
								<small>Latest comment line...</small><br/>
								<small class="text-italic text-primary-light"><i class="fa fa-calendar fa fa-fixed-width"></i> 17 days ago</small>
							</div>
						</div>
					</li>
										<li>
						<div class="media innerAll">
							<div class="media-object pull-left thumb hidden-phone"><img data-src="holder.js/50x50/dark" alt="Image" /></div>
							<div class="media-body">
								<span class="strong">bogdan</span>
								<small>Latest comment line...</small><br/>
								<small class="text-italic text-primary-light"><i class="fa fa-calendar fa fa-fixed-width"></i> 17 days ago</small>
							</div>
						</div>
					</li>
										<li>
						<div class="media innerAll">
							<div class="media-object pull-left thumb hidden-phone"><img data-src="holder.js/50x50/dark" alt="Image" /></div>
							<div class="media-body">
								<span class="strong">susanne</span>
								<small>Latest comment line...</small><br/>
								<small class="text-italic text-primary-light"><i class="fa fa-calendar fa fa-fixed-width"></i> 17 days ago</small>
							</div>
						</div>
					</li>
									</ul>
			</div>
			<div class="col-md-9 detailsWrapper">
				<div class="ajax-loading hide">
					<i class="fa fa-refresh text-primary-light fa fa-spin fa fa-4x"></i>
				</div>
				<div class="innerAll">
					<div class="row">
						<div class="col-md-9">
							<h4 class="margin-none">
								<a href="" class="btn btn-info"><i class="fa fa-user fa fa-fixed-width"></i> Bogdan</a>
							</h4>
						</div>
						<div class="col-md-3 text-right">
							<a href="" class="text-size-regular text-primary-light vertical-middle"><i class="fa fa-flag fa fa-fixed-width"></i> Report</a>
						</div>
					</div>
				</div>
				<a href="" class="load border-top ">Load earlier messages <i class="fa fa-refresh innerL third"></i></a>
				
				<div class="row row-merge borders border-top">
					<div class="col-md-12">
						<div class="innerAll">
							<div class="media">
								<a href="" class="thumb pull-left visible-md visible-lg"><img data-src="holder.js/50x50/white" alt="Image" class="media-object" /></a>
								<div class="media-body">
									<small class="pull-right text-primary-light"><i class="fa fa-calendar fa fa-fixed-width"></i> July 8, 2013 <em>12:38 pm</em></small>
									<strong class="text-primary">adrian</strong><br/>
									<small>Hello bogdan. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, reiciendis soluta libero eligendi fuga quam nam tempora illum iste atque hic eveniet vel accusantium ad quisquam a sequi impedit cumque! Autem, ipsam esse officia amet.</small>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row row-merge borders border-bottom">
					<div class="col-md-12">
						<div class="innerAll">
							<div class="media">
								<a href="" class="thumb pull-left visible-md visible-lg"><img data-src="holder.js/50x50/white" alt="Image" class="media-object" /></a>
								<div class="media-body">
									<small class="pull-right text-primary-light"><i class="fa fa-calendar fa fa-fixed-width"></i> July 8, 2013 <em>12:38 pm</em></small>
									<strong class="text-primary">bogdan</strong><br/>
									<small>Hello adrian. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, reiciendis soluta libero eligendi fuga quam nam tempora illum iste atque hic eveniet vel accusantium ad quisquam a sequi impedit cumque! Autem, ipsam esse officia amet.</small>
								</div>
							</div>
						</div>
					</div>
				</div>

				<span href="" class="load"><i class="fa fa-calendar innerR third"></i>Today</span>

				<div class="row row-merge borders border-top">
					<div class="col-md-12">
						<div class="innerAll">
							<div class="media">
								<a href="" class="thumb pull-left visible-md visible-lg"><img data-src="holder.js/50x50/white" alt="Image" class="media-object" /></a>
						
								<div class="media-body">
									<small class="pull-right text-primary-light"><i class="fa fa-calendar fa fa-fixed-width"></i> <em>12:38 pm</em></small>
									<strong class="text-primary">adrian</strong><br/>
									<small>Hello bogdan. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, quos soluta cupiditate dolor nobis id!</small>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row row-merge borders border-bottom">
					<div class="col-md-12">
						<div class="innerAll">
							<div class="media">
								<a href="" class="thumb pull-left visible-md visible-lg"><img data-src="holder.js/50x50/white" alt="Image" class="media-object" /></a>
								<div class="media-body">
									<small class="pull-right text-primary-light"><i class="fa fa-calendar fa fa-fixed-width"></i> <em>12:38 pm</em></small>
									<strong class="text-primary">bogdan</strong><br/>
									<small>Hello adrian. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, quas alias voluptatum odit nemo consequuntur blanditiis praesentium pariatur vitae dolore earum saepe dolorum maiores vero fuga sequi quibusdam labore optio doloribus consectetur laudantium in id quae nostrum dignissimos quidem voluptatibus!</small>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="innerAll">
					<form role="form">
						<div class="form-group">
							<textarea placeholder="Type in your message .. " class="form-control" rows="5"></textarea>
						</div>
						<div class="form-group">
							<div class="text-right">
								<button type="button" class="btn btn-primary">Send <i class="fa-fw fa fa-envelope"></i></button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		
	</div>
</div>
<!-- // Widget END -->

Code

@import "assets/components/modules/admin/messages/assets/less/messages.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/modules/admin/ui/buttons/assets/buttons.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/modules/admin/messages/assets/js/messages.js?v=v1.2.3"></script>
<script src="assets/components/plugins/holder/holder.js?v=v1.2.3"></script>